<template>
  <div class="page" :class="{ 'collapsed': isSidebarCollapsed }">
    <aside class="sidebar">
      <div class="sidebar-inner">
        <div class="sidebar-header">
          <span class="sidebar-title">协同计划</span>
          <button
            v-if="!isSidebarCollapsed"
            class="sidebar-pin"
            @click="toggleSidebar"
          >收起</button>
        </div>

        <!-- 新对话和群聊按钮 -->
        <div v-show="!isSidebarCollapsed" class="action-buttons">
          <button class="new-group-btn" @click="createGroupPlan">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span>创建群聊</span>
          </button>
        </div>

        <div v-if="isSidebarCollapsed" class="collapse-actions">
          <button class="sidebar-pin" @click="toggleSidebar">展开</button>
          <button class="new-chat-btn-mini" @click="startNewPlan" title="新对话">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </button>
        </div>

        <ul v-show="!isSidebarCollapsed" class="history-list">
          <li
            v-for="item in historyItems"
            :key="item.id"
            class="history-item"
            :class="{ 'active': currentSelectedSessionId === item.sessionId }"
            @click="switchSession(item)"
          >
            <div class="history-title">
              <span v-if="item.type === 'group'" class="group-badge">群</span>
              {{ item.title }}
            </div>
            <div class="history-time">{{ item.time }}</div>
          </li>
        </ul>

        <div class="sidebar-spacer"></div>
      </div>
    </aside>

    <main class="main">
      <!-- 群聊模式：显示聊天和协同计划切换 -->
      <template v-if="isGroupChat">
        <!-- 顶部标签页切换 -->
        <div class="group-tabs">
          <button
            :class="['group-tab', { active: groupActiveTab === 'chat' }]"
            @click="groupActiveTab = 'chat'"
          >
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            聊天
          </button>
          <button
            :class="['group-tab', { active: groupActiveTab === 'plan' }]"
            @click="groupActiveTab = 'plan'"
          >
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <polyline points="14 2 14 8 20 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            协同计划
          </button>
        </div>

        <!-- 聊天内容 -->
        <div v-if="groupActiveTab === 'chat'" class="chat-content">
          <ChatWelcome
            v-if="!hasMessages"
            title="群聊"
            subtitle="与团队成员一起讨论行程安排"
          />
          <MessageList
            v-else
            :messages="messages"
            :current-user-id="userInfo?.userId"
          />
          <RichTextInput
            v-if="hasMessages"
            ref="inputRef"
            :is-loading="isLoading"
            @send="handleSend"
          />
        </div>

        <!-- 协同计划内容 -->
        <div v-if="groupActiveTab === 'plan'" class="plan-content-wrapper">
          <PlanContent
            :plan-info="planInfo"
            :participants="participants"
            :session-id="sessionId"
            @update-plan="handleUpdatePlan"
          />
        </div>
      </template>

      <!-- 单人模式：只显示真人聊天功能 -->
      <template v-else>
        <ChatWelcome
          v-if="!hasMessages"
          title="聊天"
          subtitle="与好友进行一对一聊天"
        />
        <MessageList
          v-else
          :messages="messages"
          :current-user-id="userInfo?.userId"
        />
        <RichTextInput
          v-if="hasMessages"
          ref="inputRef"
          :is-loading="isLoading"
          @send="handleSend"
        />
      </template>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import ChatWelcome from '@/components/chat/ChatWelcome.vue'
import MessageList from '@/components/chat/MessageList.vue'
import RichTextInput from '@/components/chat/RichTextInput.vue'
import PlanContent from './PlanContent.vue'
// import { planApi } from '@/utils/api' // TODO: 创建协同计划相关的API

// 从localStorage获取用户信息
const userInfo = ref(null)

// 会话ID
const sessionId = ref('')

// 侧边栏收起状态
const isSidebarCollapsed = ref(false)

// 会话历史列表
const historyItems = ref([])

// 消息列表
const messages = ref([])

// 当前选中的会话ID
const currentSelectedSessionId = ref('')

// 当前会话类型：'single' 单人, 'group' 群聊
const currentSessionType = ref('single')

// 当前会话的参与者（群聊时使用）
const participants = ref([])

// 群聊的协同计划标签页：'chat' 聊天, 'plan' 协同计划
const groupActiveTab = ref('plan')

// 判断是否有消息（是否进入聊天状态）
const hasMessages = computed(() => messages.value.length > 0)

// 判断是否为群聊
const isGroupChat = computed(() => currentSessionType.value === 'group')

// 加载状态
const isLoading = ref(false)

// 输入框引用
const inputRef = ref(null)

// 当前会话标题
const currentSessionTitle = ref('')

// 当前会话在历史记录中的ID
const currentSessionHistoryId = ref(null)

// 行程信息
const planInfo = ref({
  id: null,
  title: '未命名行程',
  startDate: null,
  endDate: null,
  destination: '',
  markdownContent: `# 行程计划

## 第一天

### 上午
- 09:00 到达目的地
- 10:00 酒店入住
- 11:00 休息调整

### 下午
- 14:00 参观景点A
- 16:00 品尝当地美食

### 晚上
- 19:00 晚餐
- 21:00 自由活动

## 第二天

### 上午
- 09:00 早餐
- 10:00 前往景点B

### 下午
- 14:00 景点C游览
- 17:00 购物

## 第三天

### 上午
- 09:00 早餐
- 10:00 返程准备

### 下午
- 14:00 返程
`
})

// 获取用户名称
const displayName = computed(() => {
  if (!userInfo.value) return '游客'
  return userInfo.value.userName || userInfo.value.email || '游客'
})

// 格式化时间
function formatTime() {
  const now = new Date()
  const month = now.getMonth() + 1
  const day = now.getDate()
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  return `${month}/${day} ${hours}:${minutes}`
}

// 格式化服务器返回的时间
function formatServerTime(timeString) {
  if (!timeString) return ''
  try {
    const date = new Date(timeString)
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    return `${month}/${day} ${hours}:${minutes}`
  } catch {
    return timeString
  }
}

// 侧边栏收起/展开
function toggleSidebar() {
  isSidebarCollapsed.value = !isSidebarCollapsed.value
}

// 加载会话列表
async function loadSessionList() {
  if (!userInfo.value?.userId) {
    console.warn('用户ID不存在，无法加载会话列表')
    return
  }

  try {
    // TODO: 调用协同计划会话列表接口
    // const response = await planApi.getSessionList(userInfo.value.userId)

    // TODO: 调用接口加载会话列表（包括单人和群聊）
    // const response = await planApi.getSessionList(userInfo.value.userId)

    // 模拟数据
    const sessionList = [
      {
        sessionId: 'chat-1',
        title: '与小李的聊天',
        createTime: new Date(Date.now() - 2 * 3600000).toISOString(),
        type: 'single',
        targetUserId: 2,
        targetUserName: '小李'
      },
      {
        sessionId: 'chat-2',
        title: '与小王的聊天',
        createTime: new Date(Date.now() - 5 * 3600000).toISOString(),
        type: 'single',
        targetUserId: 3,
        targetUserName: '小王'
      },
      {
        sessionId: 'group-1',
        title: '北京五日游',
        createTime: new Date(Date.now() - 1 * 86400000).toISOString(),
        type: 'group',
        participantCount: 3
      }
    ]

    historyItems.value = sessionList
      .map(session => ({
        id: session.sessionId,
        sessionId: session.sessionId,
        title: session.title || '新计划',
        time: formatServerTime(session.createTime),
        createTime: session.createTime,
        type: session.type || 'single',
        participantCount: session.participantCount || 1
      }))
      .sort((a, b) => {
        return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
      })

    // 加载会话列表后，检查是否有保存的选中会话
    const savedSelectedSessionId = localStorage.getItem('selected_plan_session_id')
    if (savedSelectedSessionId) {
      const exists = historyItems.value.some(item => item.sessionId === savedSelectedSessionId)
      if (exists) {
        await loadPlanSession(savedSelectedSessionId)
        return
      } else {
        localStorage.removeItem('selected_plan_session_id')
      }
    }
  } catch (error) {
    console.error('加载会话列表失败:', error)
  }
}

// 加载协同计划会话
async function loadPlanSession(targetSessionId) {
  if (!targetSessionId) {
    console.warn('会话ID不存在，无法加载计划')
    return
  }

  try {
    isLoading.value = true

    // TODO: 调用接口加载协同计划数据
    // const response = await planApi.getPlanSession(targetSessionId)

    // 模拟数据
    const currentSession = historyItems.value.find(item => item.sessionId === targetSessionId)
    const isGroup = currentSession?.type === 'group'

    currentSessionType.value = isGroup ? 'group' : 'single'
    sessionId.value = targetSessionId
    currentSelectedSessionId.value = targetSessionId

    localStorage.setItem('plan_session_id', targetSessionId)
    localStorage.setItem('selected_plan_session_id', targetSessionId)

    if (isGroup) {
      // 群聊模式：加载消息、参与者和协同计划
      // TODO: 调用接口加载群聊消息（真人聊天记录）
      // const messagesResponse = await planApi.getGroupMessages(targetSessionId)
      // 模拟群聊消息
      messages.value = [
        {
          id: 1,
          role: 'user',
          content: '大家好，我们来规划一下这次的行程吧',
          userId: 2,
          userName: '小李',
          userAvatar: null,
          createdTime: new Date(Date.now() - 2 * 3600000).toISOString()
        },
        {
          id: 2,
          role: 'user',
          content: '好的，我建议先去北京',
          userId: 3,
          userName: '小张',
          userAvatar: null,
          createdTime: new Date(Date.now() - 1 * 3600000).toISOString()
        }
      ]

      // 加载参与者
      await loadParticipants()

      // 加载协同计划数据
      // TODO: 调用接口加载协同计划
      planInfo.value = {
        id: targetSessionId,
        title: currentSession?.title || '未命名行程',
        startDate: new Date(Date.now() + 7 * 86400000).toISOString(),
        endDate: new Date(Date.now() + 9 * 86400000).toISOString(),
        destination: '杭州',
        markdownContent: `# 行程计划\n\n## 第一天\n\n### 上午\n- 09:00 到达目的地\n- 10:00 酒店入住\n\n### 下午\n- 14:00 参观景点\n\n## 第二天\n\n### 上午\n- 09:00 早餐\n- 10:00 前往景点\n\n## 第三天\n\n### 上午\n- 09:00 早餐\n- 10:00 返程准备\n\n### 下午\n- 14:00 返程`
      }

      groupActiveTab.value = 'chat' // 默认显示聊天标签
    } else {
      // 单人模式：只加载真人聊天消息，不加载协同计划
      // TODO: 调用接口加载单人聊天消息（与对方的聊天记录）
      // const messagesResponse = await planApi.getSingleMessages(targetSessionId, currentSession.targetUserId)
      // 模拟单人聊天消息
      messages.value = [
        {
          id: 1,
          role: 'user',
          content: '你好，最近有空吗？',
          userId: userInfo.value?.userId || 1,
          userName: displayName.value,
          userAvatar: userInfo.value?.avatar || null,
          createdTime: new Date(Date.now() - 2 * 3600000).toISOString()
        },
        {
          id: 2,
          role: 'user',
          content: '有的，有什么事吗？',
          userId: currentSession?.targetUserId || 2,
          userName: currentSession?.targetUserName || '对方',
          userAvatar: null,
          createdTime: new Date(Date.now() - 1 * 3600000).toISOString()
        }
      ]
      participants.value = []
      planInfo.value = {
        id: null,
        title: '未命名行程',
        startDate: null,
        endDate: null,
        destination: '',
        markdownContent: ''
      }
    }

    if (currentSession) {
      currentSessionTitle.value = currentSession.title
      currentSessionHistoryId.value = currentSession.id
    }
  } catch (error) {
    console.error('加载协同计划失败:', error)
  } finally {
    isLoading.value = false
  }
}

// 加载参与者（群聊）
async function loadParticipants() {
  // TODO: 调用接口加载参与者
  participants.value = [
    {
      id: userInfo.value?.userId || 1,
      name: displayName.value,
      avatar: userInfo.value?.avatar || null,
      role: '创建者',
      isOnline: true
    },
    {
      id: 2,
      name: '小李',
      avatar: null,
      role: '参与者',
      isOnline: true
    },
    {
      id: 3,
      name: '小张',
      avatar: null,
      role: '参与者',
      isOnline: false
    }
  ]
}

// 切换会话
async function switchSession(item) {
  if (currentSelectedSessionId.value === item.sessionId) {
    return
  }
  await loadPlanSession(item.sessionId)
}

// 开始新对话（单人 - 真人聊天）
function startNewPlan() {
  // TODO: 打开选择联系人对话框，选择要聊天的对象
  // 这里先模拟创建会话
  const newSessionId = (crypto && crypto.randomUUID)
    ? crypto.randomUUID()
    : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`

  const newPlan = {
    id: newSessionId,
    sessionId: newSessionId,
    title: '新对话',
    time: formatTime(),
    createTime: new Date().toISOString(),
    type: 'single',
    targetUserId: null, // TODO: 需要选择聊天对象
    targetUserName: null
  }

  historyItems.value.unshift(newPlan)
  currentSelectedSessionId.value = newSessionId
  currentSessionType.value = 'single'
  sessionId.value = newSessionId
  messages.value = []
  participants.value = []
  planInfo.value = {
    id: null,
    title: '未命名行程',
    startDate: null,
    endDate: null,
    destination: '',
    markdownContent: ''
  }
  currentSessionTitle.value = ''
  currentSessionHistoryId.value = newSessionId

  localStorage.setItem('plan_session_id', newSessionId)
  localStorage.setItem('selected_plan_session_id', newSessionId)

  // TODO: 提示用户选择聊天对象
  console.log('请选择要聊天的对象')
}

// 创建群聊计划
function createGroupPlan() {
  // TODO: 打开创建群聊对话框，邀请成员
  const newSessionId = (crypto && crypto.randomUUID)
    ? crypto.randomUUID()
    : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`

  const newGroup = {
    id: newSessionId,
    sessionId: newSessionId,
    title: '新群聊计划',
    time: formatTime(),
    createTime: new Date().toISOString(),
    type: 'group',
    participantCount: 1
  }

  historyItems.value.unshift(newGroup)
  currentSelectedSessionId.value = newSessionId
  currentSessionType.value = 'group'
  sessionId.value = newSessionId
  messages.value = []
  participants.value = [
    {
      id: userInfo.value?.userId || 1,
      name: displayName.value,
      avatar: userInfo.value?.avatar || null,
      role: '创建者',
      isOnline: true
    }
  ]
  planInfo.value = {
    id: newSessionId,
    title: '未命名行程',
    startDate: null,
    endDate: null,
    destination: '',
    markdownContent: `# 行程计划\n\n在这里编辑你的行程...`
  }
  groupActiveTab.value = 'plan'
  currentSessionTitle.value = '新群聊计划'
  currentSessionHistoryId.value = newSessionId

  localStorage.setItem('plan_session_id', newSessionId)
  localStorage.setItem('selected_plan_session_id', newSessionId)
}

// 发送消息（单人和群聊都是真人聊天）
async function handleSend(text) {
  if (!text.trim()) return

  const userMessage = {
    id: Date.now(),
    role: 'user',
    content: text,
    userId: userInfo.value?.userId,
    userName: displayName.value,
    userAvatar: userInfo.value?.avatar || null,
    createdTime: new Date().toISOString()
  }
  messages.value.push(userMessage)

  isLoading.value = true

  try {
    if (isGroupChat.value) {
      // TODO: 调用群聊消息接口，发送给所有群成员
      // await planApi.sendGroupMessage(sessionId.value, text, userInfo.value.userId)
      console.log('发送群聊消息:', text)
    } else {
      // TODO: 调用单人聊天接口，发送给对方
      // await planApi.sendSingleMessage(sessionId.value, text, userInfo.value.userId, targetUserId)
      console.log('发送单人消息:', text)
    }

    // 消息发送成功后，等待对方回复（通过WebSocket或轮询接收）
    // 这里不做AI回复，只做真实的人与人之间的聊天
    isLoading.value = false
  } catch (error) {
    console.error('发送消息失败:', error)
    isLoading.value = false
    // 发送失败时移除消息
    const index = messages.value.findIndex(m => m.id === userMessage.id)
    if (index !== -1) {
      messages.value.splice(index, 1)
    }
  }
}

// 更新计划
function handleUpdatePlan(updatedPlan) {
  planInfo.value = { ...planInfo.value, ...updatedPlan }

  // 如果更新了标题，同时更新历史记录中的标题
  if (updatedPlan.title && currentSelectedSessionId.value) {
    const historyItem = historyItems.value.find(item => item.sessionId === currentSelectedSessionId.value)
    if (historyItem) {
      historyItem.title = updatedPlan.title
      currentSessionTitle.value = updatedPlan.title
    }
  }
}

onMounted(() => {
  // 从localStorage获取用户信息
  const storedUserInfo = localStorage.getItem('userInfo')
  if (storedUserInfo) {
    try {
      userInfo.value = JSON.parse(storedUserInfo)
    } catch (error) {
      console.error('解析用户信息失败:', error)
    }
  }

  // 生成新的会话ID（用于新计划）
  sessionId.value = (crypto && crypto.randomUUID)
    ? crypto.randomUUID()
    : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`

  // 加载会话列表
  loadSessionList()
})
</script>

<style scoped>
:global(html, body, #app) {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: calc(100vh - 64px);
  background: #ffffff;
  padding-top: 64px;
}

.page.collapsed {
  grid-template-columns: 72px 1fr;
}

.sidebar {
  background: #ffffff;
  border-right: 1px solid #eef0f5;
  padding: 0;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  padding-top: 24px;
  position: relative;
  overflow-y: auto;
}

.sidebar-spacer {
  flex: 1 1 auto;
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
}

.collapse-actions {
  margin-bottom: 12px;
}


.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sidebar-title {
  font-weight: 600;
  color: #2b2f36;
}

.sidebar-pin {
  border: none;
  background: #f2f4f8;
  color: #5b6b8b;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.sidebar-pin:hover {
  background: #e5e7eb;
}

.page.collapsed .sidebar-pin {
  width: 100%;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.new-chat-btn,
.new-group-btn {
  width: 100%;
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.new-group-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.new-chat-btn:hover,
.new-group-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.new-chat-btn:active,
.new-group-btn:active {
  transform: translateY(0);
}

.new-chat-btn svg,
.new-group-btn svg {
  width: 18px;
  height: 18px;
}

.new-chat-btn-mini {
  width: 100%;
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.new-chat-btn-mini:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.new-chat-btn-mini svg {
  width: 20px;
  height: 20px;
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.history-item {
  background: #fbfcff;
  border: 1px solid #eef0f5;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.history-item:hover {
  background: #f0f2f5;
  border-color: #d0d5dd;
}

.history-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: #ffffff;
}

.history-item.active .history-title {
  color: #ffffff;
}

.history-item.active .history-time {
  color: rgba(255, 255, 255, 0.8);
}

.history-title {
  color: #2b2f36;
  font-size: 14px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.group-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.history-item.active .group-badge {
  background: rgba(255, 255, 255, 0.3);
}

.history-time {
  color: #98a2b3;
  font-size: 12px;
}

.main {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  padding-top: 0;
  overflow: hidden;
}

.group-tabs {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  background: #ffffff;
  border-bottom: 1px solid #eef0f5;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.group-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.group-tab:hover {
  color: #667eea;
}

.group-tab.active {
  color: #667eea;
  border-bottom-color: #667eea;
  font-weight: 600;
}

.group-tab svg {
  width: 18px;
  height: 18px;
}

.chat-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 0;
  overflow: hidden;
}

.plan-content-wrapper {
  flex: 1;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
</style>
